<template>
    <box gap="0">
        <x-header class="header" :title="title" ref="head"></x-header>
        <nuxt class="content-box" ref="content"/>
    </box>
</template>
<script>
    import config from '~/assets/js/config.js'

    export default{
        data(){
            return {
                title:"首页",
                hrefName:this.$router.name
            }
        },
        watch:{
            $route(to,from){
                let name = to.name;
                this.title = config[name].name||"404";
            }
        }
    }
</script>
<style>
    html {
        font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-size: 16px;
        word-spacing: 1px;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        box-sizing: border-box;
    }
    html,body{
        width:100%;
        overflow-y: scroll;
    }
    .vux-header.header{
        width:100%;
        height:3rem;
        position:fixed;
        top:0;
        left:0;
        z-index:2;
    }
    .content-box{
        height:auto;
        width:100%;
        overflow-y: scroll;
        padding:3rem 0;
    }

    *, *:before, *:after {
        box-sizing: border-box;
        margin: 0;
    }
    .page-enter-active,.page-leave-active{
        opacity:0;
        transition:opacity .4s ease-in-out;
    }
    .page-enter{
        opacity:0;
    }
    .page-leave,.page-enter-active{
        opacity:1;
    }
</style>

